<!-- AsideCom.vue -->
<script>
import { mapState } from 'vuex'
import { Location, House, User } from '@element-plus/icons-vue'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    open () {
      // this.$router.push('/manager/managerlist')
    }
  },
  components: {
    Location,
    House,
    User
  },
  // 接收父组件传递过来的属性
  props: ['collapse']
}
</script>
<template>
  <!--
                                        如果需要实现我们 menu 点击可以修改页面，那么我们需要在 menu 组件中添加 router
                                        属性，第二步操作是在 menu-item 中添加属性 index,其对应的值是 要跳转的路径
                       -->

<!-- collapse 标签菜单是否需要展开 -->
<el-menu :default-active="$store.state.currentPath" :unique-opened="true" @open="open" router :collapse="collapse"
  class="el-menu-vertical-demo">
  <el-menu-item index="/">
    <el-icon>
      <House />
    </el-icon>
    <template #title>
      <span>首页</span>
    </template>
    </el-menu-item>

    <el-sub-menu v-for="item in userInfo.checkedkeys" :key="item.path" :index="item.path">
      <template #title>
        <el-icon>
          <User />
        </el-icon>
        <span>{{ item.label }}</span>
      </template>

      <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">{{ child.label
      }}</el-menu-item>
      <!-- <el-menu-item index="/manager/userlist">用户列表</el-menu-item> -->
    </el-sub-menu>


    <!-- <el-sub-menu index="/banner">
                                          <template #title>
                                            <el-icon>
                                              <User />
                                            </el-icon>
                                            <span>轮播图管理</span>
                                          </template>

                                          <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
                                          <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
                                        </el-sub-menu> -->


  </el-menu>
</template>
